import React, { Component } from 'react';

import { Flex , Icon } from 'antd-mobile';

import 'antd-mobile/lib/flex/style/index.css';
import '../static/styles/category.css';
import '../static/icon/icon.css';

class Category extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <Flex direction="column" className="category-box bf pdlr15">
                <Flex>
                    <Flex className="category-icon-item" direction="column">
                        <div className="category-icon bcc">
                            <i className="iconfont icon-shuiguo1"></i>
                        </div>
                        <div className="category-name">藤上的</div>
                    </Flex>
                    <Flex className="category-icon-item" direction="column">
                        <div className="category-icon bcl">
                            <i className="iconfont icon-shuiguo3"></i>
                        </div>
                        <div className="category-name">瓜类</div>
                    </Flex>
                    <Flex className="category-icon-item" direction="column">
                        <div className="category-icon bcb">
                            <i className="iconfont icon-liangyoushengxian"></i>
                        </div>
                        <div className="category-name">樱桃</div>
                    </Flex>
                    <Flex className="category-icon-item" direction="column">
                        <div className="category-icon bcsh">
                            <i className="iconfont icon-shengxian"></i>
                        </div>
                        <div className="category-name">树上的</div>
                    </Flex>
                </Flex>
                <Flex>
                    <Flex className="category-icon-item" direction="column">
                        <div className="category-icon bctl">
                            <i className="iconfont icon-_shuiguozhipin"></i>
                        </div>
                        <div className="category-name">鲜榨</div>
                    </Flex>
                    <Flex className="category-icon-item" direction="column">
                        <div className="category-icon bch">
                            <i className="iconfont icon-hongjiu"></i>
                        </div>
                        <div className="category-name">酒类</div>
                    </Flex>
                    <Flex className="category-icon-item" direction="column">
                        <div className="category-icon bcf">
                            <i className="iconfont icon-suannai"></i>
                        </div>
                        <div className="category-name">酸奶</div>
                    </Flex>
                    <Flex className="category-icon-item" direction="column">
                        <div className="category-icon bcdh">
                            <i className="iconfont icon-dianpu1"></i>
                        </div>
                        <div className="category-name">附近</div>
                    </Flex>
                </Flex>
            </Flex>
        );
    }
}

export default Category;
